<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="common.css" />
		<style type="text/css">
			body { width: 15em; }
			#footer { font-size: 8pt; text-align: right }
			#siteDomain { color: #0e774a }
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="common.js"></script>
		<script type="text/javascript">
			var options;
			var siteDomain;
			
			function init() {				
				// Load options
				options = loadOptions();

				chrome.tabs.getSelected(null, function(tab) {				
					siteDomain = tab.url.split('/', 3)[2];
					/*if (siteDomain.substr(0, 4) == 'www.') {
						siteDomain = siteDomain.substr(4);
					}*/
					$('#siteDomain').text(siteDomain);
					
					$('#chkExtensionDisabled')[0].checked = !options.extensionEnabled;
					
					for (var i = 0; i < options.excludedSites.length; i++) {
						if (options.excludedSites[i] == siteDomain) {
							$('#chkExcludeSite')[0].checked = true;
							break;
						}
					}
				});
			}
			
			function chkExtensionDisabledOnClick() {
				options.extensionEnabled = !$('#chkExtensionDisabled')[0].checked;
				saveOptions();
			}
			
			function chkExcludeSiteOnClick() {
			
				// Get the excluded site index if it has already been added
				var excludedSiteIndex = -1;
				for (var i = 0; i < options.excludedSites.length; i++) {
					if (options.excludedSites[i] == siteDomain) {
						excludedSiteIndex = i;
						break;
					}
				}
				
				if ($('#chkExcludeSite')[0].checked) {
					if (excludedSiteIndex == -1)
						options.excludedSites.push(siteDomain);
				} else {
					if (excludedSiteIndex > -1)
						options.excludedSites.splice(excludedSiteIndex, 1);
				}
				
				console.log(options.excludedSites);

				saveOptions();
			}
			
			function saveOptions() {
				localStorage.options = JSON.stringify(options);
				sendOptions(options);
			}
		</script>
	</head>
	<body onload="init()">
		<h2>Hover Zoom</h2>
		<table><tr><td><input type="checkbox" id="chkExtensionDisabled" onclick="chkExtensionDisabledOnClick()"></td><td><label for="chkExtensionDisabled">Disable for all sites</label></td></tr>
		<tr><td><input type="checkbox" id="chkExcludeSite" onclick="chkExcludeSiteOnClick()"></td><td><label for="chkExcludeSite">Disable for <span id="siteDomain"></span></label></td></tr></table>
		<p id="footer"><a href="options.html" target="_blank">More options</a></p>
	</body>
</html>